<template>
  <div v-value="new_value" contentEditable="true">
  </div>
</template>

<script>
  import Vue from 'vue'

  Vue.directive('value', {
    bind(el, binding, vnode, oldVnode) {
      el.innerHTML = binding.value;
      el.addEventListener('keyup', () => {
        vnode.context.$set(vnode.context, binding.expression, el.innerHTML)
      })
    },
    inserted(el, binding, vnode, oldVnode) {
    },
    update(el, binding, vnode, oldVnode) {
      if (el.innerHTML != binding.value)
        el.innerHTML = binding.value
    },
    componentUpdated(el, binding, vnode, oldVnode) {
    },
    unbind() {
      console.log(arguments)
    }
  })

  export default {
    props: {
      value: String,
      id: Number
    },
    data() {
      return {
        new_value: this.value,
      }
    },
    watch: {
      new_value(value) {
        this.$emit('on-change', value, this.id)
      },
      value(value) {
        this.new_value = value
      }
    }
  }
</script>
